@charset "UTF-8";
.hotexpobox .toptools {
  height: .98rem;
  width: 7.5rem;
  background: #000;
  position: fixed;
  top: .8rem;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .3rem;
}

.hotexpobox .toptools svg {
  width: .5rem;
  transform: rotate(180deg);
}

.hotexpobox .toptools img {
  display: block;
  width: .5rem;
}

.hotexpobox .toptools span {
  font-size: .34rem;
  font-weight: bold;
}

.hotexpobox .introduce {
  height: 5.25rem;
  padding: .5rem .3rem;
}

.hotexpobox .introduce .mainimg {
  height: 4.58rem;
  width: 7.5rem;
}

.hotexpobox .introduce .mainimg img {
  display: block;
  width: 7.5rem;
}

.hotexpobox .introduce h2 {
  text-align: center;
  line-height: .8rem;
  font-size: .38rem;
}

.hotexpobox .introduce .title {
  text-align: center;
  line-height: .4rem;
  font-size: .28rem;
  color: #b57534;
}

.hotexpobox .introduce .content {
  line-height: .4rem;
  font-size: .26rem;
  letter-spacing: .2px;
  color: #a0a0a0;
  text-indent: .8rem;
  display: block;
  height: 2rem;
  overflow: hidden;
  /* 2.用省略号来代替超出文本 */
  text-overflow: ellipsis;
  /* 3.设置盒子属性为-webkit-box  必须的 */
  display: -webkit-box;
  /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
  -webkit-line-clamp: 5;
  /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
  word-break: break-all;
  /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
  -webkit-box-orient: vertical;
}

.hotexpobox .introduce button {
  transition: all .2s;
  display: block;
  border: 0;
  border-radius: 30px;
  width: 1.25rem;
  height: .4rem;
  background: #b57534;
  color: white;
  line-height: .4rem;
  font-size: .22rem;
  margin: .3rem auto;
}

.hotexpobox .introduce button:hover {
  opacity: 0.6;
}

.hotexpobox .itembar p {
  text-align: center;
  line-height: .8rem;
  font-size: .38rem;
}

.hotexpobox .itemclass {
  padding: 0 .3rem;
  height: .7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hotexpobox .itemclass li {
  font-size: .28rem;
  padding: 0 .3rem;
}

.hotexpobox .itemdisplaybox {
  height: 10.05rem;
  padding: 0 .3rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}

.hotexpobox .itemdisplaybox .item {
  width: 3.34rem;
  height: 4.8rem;
  background: #1b1b1b;
  color: white;
  border-radius: .12rem;
  overflow: hidden;
}

.hotexpobox .itemdisplaybox .item img {
  display: block;
  width: 3.34rem;
  height: 3.62rem;
}

.hotexpobox .itemdisplaybox .item .name {
  margin-top: .12rem;
  text-align: left;
  line-height: .5rem;
  font-size: .28rem;
}

.hotexpobox .itemdisplaybox .item .painter {
  padding: 0 .2rem;
  text-align: left;
  color: #5f5f5f;
  font-size: .24rem;
}

.hotexpobox .liActive1:nth-child(1) {
  background: #b57534;
}

.hotexpobox .liActive2:nth-child(2) {
  background: #b57534;
}

.hotexpobox .liActive3:nth-child(3) {
  background: #b57534;
}

.hotexpobox .liActive4:nth-child(4) {
  background: #b57534;
}

.hotexpobox .liActive5:nth-child(5) {
  background: #b57534;
}
